<template>
  <div class="allpage">
    <!-- 小龙直营统计 -->
    <el-form :inline="true" class="form-style form" :model="form">
      <el-form-item style="margin:15px 0">
        <div shadow="hover" class="form-said">
            <div class="form-said-l">
              <el-image class="img" :src="url" ></el-image>
            </div>
            <div class="form-said-r">
                <p>团长总数</p>
                <p>100</p>
            </div>
        </div>
      </el-form-item>
      <el-form-item style="margin:15px 0">
        <div shadow="hover" class="form-said">
            <div shadow="hover" class="form-said">
            <div class="form-said-l">
              <el-image class="img" :src="url" ></el-image>
            </div>
            <div class="form-said-r">
                <p>交易总额</p>
                <p>￥100</p>
            </div>
        </div>
        </div>
      </el-form-item>
      <el-form-item style="margin:15px 0">
        <div shadow="hover" class="form-said">
            <div shadow="hover" class="form-said">
            <div class="form-said-l">
              <el-image class="img" :src="url" ></el-image>
            </div>
            <div class="form-said-r">
                <p>订单总数</p>
                <p>100</p>
            </div>
        </div>
        </div>
      </el-form-item>
      <el-form-item style="margin:15px 0">
        <div shadow="hover" class="form-said">
            <div shadow="hover" class="form-said">
            <div class="form-said-l">
              <el-image class="img" :src="url" ></el-image>
            </div>
            <div class="form-said-r">
                <p>活动总数（进行中）</p>
                <p>100</p>
            </div>
        </div>
        </div>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="form-style" :model="formInline">
      <el-form-item prop="time" style="margin:15px 0 15px 30px">
        <el-date-picker
          type="date"
          v-model="formInline.time"
          @change="getSTime"
          placeholder="发布日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 30px" label="团长：">{{formInline.SaleManName}}</el-form-item>
      <el-form-item style="margin:15px 0 15px 30px">
        <el-button @click="choose" icon="el-icon-circle-plus">点击选择</el-button>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 30px">
        <el-button icon="el-icon-refresh" type="warning">重置</el-button>
        <el-button icon="el-icon-search" type="primary" >查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-style">
      <el-table :data="tableData" border>
        <el-table-column label="序号"></el-table-column>
        <el-table-column label="团长姓名"></el-table-column>
        <el-table-column label="交易额"></el-table-column>
        <el-table-column label="订单数量"></el-table-column>
        <el-table-column label="商品数"></el-table-column>
        <el-table-column label="进行中的活动"></el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :pageSize="pageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @pageSizeChange="pageSizeChange"
      />
    </div>
    <group-dialog :dTitle="dialogTitle" :visible="dialogFormVisible" @closeDialog="close" />
  </div>
</template>

<script>
import GroupDialog from "./GroupDialog";
import Botpage from "@/components/botpage/Botpage";
export default {
  data() {
    return {
      //  titles:[
      //   {title:"团长总数"},
      //   {title:"交易总额"},
      //   {title:"订单总数"},
      //   {title:"活动总数（进行中）"},
      // ],
      formInline: {},
      dialogFormVisible: false,
      dialogTitle: "",
      currentPage: 1,
      pageSize: 10,
      total: 1,
      tableData: [],
      form: {},
      url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    };
  },
  methods: {
    getSTime(val) {
      this.formInline.time = val;
    },
    choose() {
      this.dialogFormVisible = true;
      this.dialogTitle = "选择团长";
    },
    close(reload) {
      console.log(reload);
      this.dialogFormVisible = false;
      if (reload === "reload") {
        // this.getTableData();
      }
    },
    currentChange(event) {
      this.currentPage = event;
    },
    pageSizeChange(event) {
      this.pageSize = event;
    },
  },
  components: {
    GroupDialog,
    Botpage,
  },
};
</script>

<style lang="less" scoped>
.form {
    display: flex;
    flex: 1;
    justify-content: space-around;
    .form-said {
        background-color: #F0F1F5;
        display: flex;
        width: 200px;
        flex-direction: row;
        .form-said-l,.form-said-r {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .form-said-l {
            flex:1;
            .img {
              width:50px;
              height:50px;
            }
        }
        .form-said-r {
            flex:2;
            flex-direction: column;
            :first-child {
              font-weight: bold;
            }
        }
    }
}
</style>